<!--
/**
 * Created by PhpStorm.
 * User: Devmc
 * Date: 2021/4/23
 * Time: 9:03
 */
-->
<template>
  <div class="comment">
    <div class="title">
      <h3>发布留言</h3>
    </div>

    <comment-editor @click="postComment"></comment-editor>


    <template>
      <div class="title" v-show="hasData">
        <h3>我的留言</h3>
      </div>

      <comment-list :has-data.sync="hasData" ref="commentList"></comment-list>
    </template>
  </div>
</template>

<script>
import CommentEditor from "../../components/CommentEditor";
import CommentList from "../../components/CommentList";

export default {
  name: "MainComment",
  components: {CommentList, CommentEditor},
  props: {},
  data() {
    return {
      hasData: false
    }
  },
  created() {
  },
  mounted() {

  },
  methods: {
    /**
     * 留言
     */
    postComment(value) {
      const comment = {
        comment: {
          userId: this.$store.state.userData.userId,
          comment: value,
          time: new Date().format('yyyy-MM-dd hh:mm:ss')
        },
        reply: []
      };

      this.axios.post(this.$store.state.api + '/comment/add', {
        comment: JSON.stringify(comment),
        userId: this.$store.state.userData.userId
      }).then((response) => {
        // 更新
        this.$refs['commentList'].getComment();

        this.$message({
          type: response.data.data ? 'success' : 'error',
          message: response.data.data ? '留言成功！' : '留言失败！',
          duration: 2000
        });
      }).catch((error) => {
        console.log(error);
      });
    }
  },
  watch: {}
}
</script>

<style lang="less" scoped>
.comment {
  width: 70%;
  margin: 0 auto;

  .title {
    width: 100%;
    height: 56px;

    h3 {
      font-size: 20px;
      line-height: 56px;
      color: #343434;
      font-weight: 600;
    }
  }
}
</style>